<template>
	<view class="main-content">
		<index-header :statusBarHeight="statusBarHeight"></index-header>
		<view class="content" :style="{'padding-top': statusBarHeightS +'px'}">
			<ban style="margin-top: 40upx;margin-left: 36rpx;" title="高级搜索"></ban>
			<view class="lmenu">
				<text class="label_t">搜索时间：</text><text>从：</text><input type="text" value="" /><text style="margin-left: 10upx;">到：</text><input type="text" value="" />
			</view>
			<view class="lmenu">
				<text class="label_t">搜索模型：</text>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
			</view>
			<view class="lmenu">
				<text class="label_t">搜索栏目：</text><picker @change="bindPickerChanges" :value="indexs" :range="array1">
					<view class="uni-input">{{array1[indexs]}}</view>
				</picker>
			</view>
			<view class="lmenu">
				<text class="label_t">关键字：</text><input style="width: 400upx;" type="text" value="" />
			</view>
			<view class="lmenu">
				<text class="label_t">查找字段类型：</text>
				<radio-group name="radio">
					<label>
						<radio value="radio1" /><text>标题</text>
					</label>
					<label>
						<radio value="radio2" /><text>标签（关键字）</text>
					</label>
				</radio-group>
			</view>
			<view class="btn">
				<view>搜索</view>
				<view>重新搜索</view>
			</view>
	    </view>
		<view class="search_result">
			<text>暂时没有相关结果</text>
		</view>
		<bottom></bottom>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex';
	
	export default {
	    data() {
	        return {
				statusBarHeight:'',
				statusBarHeightS:'',
				array: ['模型1', '模型2', '模型3', '模型4'],
				array1: ['栏目1', '栏目2', '栏目3', '栏目4'],
				index:0,
				indexs:0
	        };
	    },
	
	    onLoad() {
	       
	    },
	    onShow(e) {
	        // #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
			   var sysinfo = uni.getSystemInfoSync();
			   this.statusBarHeight = sysinfo.statusBarHeight + 44;
			   this.statusBarHeightS = sysinfo.statusBarHeight + 120;
			// #endif
			// #ifdef H5
			   var sysinfo = uni.getSystemInfoSync();
			   this.statusBarHeight = '0';
			   this.statusBarHeightS = '54';
			// #endif
	    },
	
	
	    computed: {
	       
	    },
	    methods: {
			 bindPickerChange: function(e) {
				this.index = e.target.value
			},
			
			bindPickerChanges: function(e) {
				this.indexs = e.target.value
			}
		
		}
	}
	
</script>

<style lang="scss">
	.search_result {
		width: 100%;
		min-height: 300upx;
		text-align: center;
		padding-top: 100upx;
		
		text {
			margin: 0 auto;
			font-size: 27upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 42upx;
			color: #FF4040;
			opacity: 1;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		
		.lmenu {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 40upx;
			
			.label_t {
				margin-left: 51upx;
				display: flex;
				flex-shrink: 0;
			}
			
			input {
				width: 200upx;
				height: 38upx;
				border: 1px solid #707070;
			}
			
			picker {
				width: 400upx;
				height: 42upx;
				border: 1px solid #707070;
				
				.uni-input {
					height: 42upx;
					 padding: 0 13upx;
				}
			}
		}
		
		.btn {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			margin-top: 70upx;
			view {
				&:first-child {
					width: 79upx;
					height: 48upx;
					line-height: 48upx;
					background: #165E8E;
					opacity: 1;
					text-align: center;
					color: #FFFFFF;
					margin-right: 30upx;
				}
				
				&:last-child {
					width: 157upx;
					height: 48upx;
					line-height: 48upx;
					background: #B0B0B0;
					opacity: 1;
					text-align: center;
					color: #FFFFFF;
					margin-right: 30upx;
				}
			}
			
		}
	}

</style>
